<template>
  <div class="fund-page">
    <UserBalance />
    <Tabs v-model:active="params.status"
      @click-tab="handleConfirm">
      <Tab :title="category.text"
        :name="category.value"
        v-for="category in totalTransactionStatus"
        :key="category.value" />
    </Tabs>
    <PullRefresh v-model="pageState.refreshing"
      @refresh="refresh" class="pull-refresh">
      <SkeletonCard
        v-if="stateTransactionList.loading" />
      <Empty
        v-if="!stateTransactionList.data.length && !stateTransactionList.loading" />
      <List
        v-model:loading="stateTransactionList.loading"
        :finished="pageState.finished"
        finished-text="没有更多了"
        error-text="请求失败，下拉刷新"
        :error="pageState.error"
        @load="fetchData">
        <Collapse v-model="collapseList">
          <CardRecord :record="record"
            v-for="(record, index) in stateTransactionList.data"
            :key="record.flowId" :index="index"
            :length="stateTransactionList.data.length" />
        </Collapse>
      </List>
    </PullRefresh>

  </div>
</template>

<script setup lang="ts">
import {
  Collapse,
  Empty,
  List,
  PullRefresh,
  Tab,
  Tabs,
} from 'vant';
import { ref } from 'vue';

import SkeletonCard from '@/components/SkeletonCard.vue';

import CardRecord from '../components/CardRecord.vue';
import UserBalance from '../components/UserBalance.vue';
import { totalTransactionStatus } from '../config';
import useTransaction from '../hooks/useTransaction';

const {
  state: stateTransactionList,
  params,
  pageState,
  fetchData,
  refresh,
} = useTransaction();

const collapseList = ref([]);

const handleConfirm = () => {
  pageState.value.refreshing = true;
  refresh();
};

</script>
<style lang="less" scoped>
.fund-page {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  .pull-refresh {
    flex-grow: 1;
  }
}
</style>
